<template>
	<view>
		<nav-bar title="订单确认" @goBack="goBack"></nav-bar>
		<view style="height: 100vh;overflow-y: auto;">
			<view class="top-bg"></view>
			<view class="top-data">
				<view class="top">
					<view class="top-name">
						{{ transferData.storeName }}
					</view>
					<view class="address">
						<view class="left">
							<u-icon name="map" color="rgba(102, 102, 102, 1)" size="18"></u-icon>
							<view style="margin-left: 5rpx;">门店地址:</view>
						</view>
						<view class="right">
							{{ transferData.storeAddress }}
						</view>
					</view>
				</view>
			</view>
			<view class="countdown-box">
				<view class="clock-icon">
					<u-icon name="clock" color="#FFF" size="16"></u-icon>
				</view>
				<view>剩余支付时间：</view>
				<view class="time-box">
					<u-count-down :time="3 * 60 * 1000" format="HH:mm:ss" @change="onChange">
						00:{{ timeData.minutes > 10 ? timeData.minutes : '0' + timeData.minutes }}:{{ timeData.seconds > 10 ? timeData.seconds : '0' + timeData.seconds }}
					</u-count-down>
				</view>
			</view>
			<view class="preview">
				<view class="title">
					<view class="box-line"></view>
					<view class="text">服务技师</view>
					<order-master :technicianConfig="chooseTechnician"></order-master>
				</view>
			</view>
			<!-- 包间 -->
			<view class="preview">
				<view class="title">
					<view class="box-line"></view>
					<view class="text">
						<!-- @click="clickChooseRoom" -->
						<view class="text-left">
							<view class="name">包间</view>
							<view class="room-item">{{ chooseRoom.compartmentNubmer }}</view>
							<view class="room-item">{{ chooseRoom.compartmentName }}</view>
							<view class="room-item" v-if="chooseRoom.privateRoomPrice">
								￥{{ chooseRoom.privateRoomPrice }}</view>
						</view>
						<view class="text-right">
							<u-switch v-model="ChooseRoomValue" activeColor="#f9ae3d" inactiveColor="rgb(230, 230, 230)"
								@change="clickChooseRoom"></u-switch>
							<!-- <u-icon name="arrow-right" color="rgba(128, 128, 128, 1)" size="18"></u-icon> -->
						</view>
					</view>
				</view>
			</view>
			<!-- 附加商品 -->
			<!-- <view class="preview">
				<view class="title">
					<view class="box-line"></view>
					<view class="text">附加商品</view>
					<scroll-view :scroll-x="true" class="img-list">
						<view class="img-box" v-if="accessoryData && accessoryData.length">
							<view v-for="(item, index) in accessoryData" :key="index" class="box">
								<image class="img" :src="item.img" alt="" />
								<view class="money-box">
									<view>{{ item.productName }}</view>
									<view class="money-text">
										<u-icon name="rmb" color="#fe4d4f" size="15"></u-icon>
										<view class="money">{{ item.originalPrice }}</view>
									</view>
								</view>
								<view class="number">
									<u-number-box v-model="item.number" min="0">
										<view slot="minus" class="minus" @click="clickMinusItem(item)">
											<u-icon name="minus" size="16"
												:color="item.number === 0 ? 'rgba(213, 213, 213, 1)' : ''"></u-icon>
										</view>
										<text slot="input" style="width: 170rpx;text-align: center;"
											class="input">{{ item.number }}</text>
										<view slot="plus" class="plus" @click="clickPlusItem(item)">
											<uni-icons type="plusempty" size="16"></uni-icons>
										</view>
									</u-number-box>
								</view>
							</view>
						</view>
						<view v-else>暂无附加商品</view>
					</scroll-view>
				</view>
			</view> -->
			<!-- 费用明细 -->
			<view class="preview">
				<view class="title">
					<view class="box-line"></view>
					<view class="text">费用明细</view>
					<view class="pay-list">
						<view class="list">
							<view class="name">项目总费用</view>
							<view class="money">
								<u-icon name="rmb" color="#6d6d6d" size="12"></u-icon>
								<view>{{ noCouponAccount }}</view>
							</view>
						</view>
						<view class="pay-coupon">
							<view class="pay-coupon-list" @click="clickChooseCoupon">
								<view class="pay-coupon-title">
									<view>优惠券</view>
									<view class="name" v-if="couponList.length">{{ chooseCouponForm.name || '请选择优惠券' }}
									</view>
								</view>
								<view class="pay-coupon-detail">
									<view class="text" v-if="couponList.length">
										<u-icon name="minus" color="#909090" size="9"
											v-if="chooseCouponForm.ableMaxdiscountAmount"></u-icon>
										<u-icon name="rmb" color="#909090" size="10"
											v-if="chooseCouponForm.ableMaxdiscountAmount"></u-icon>
										<view style="transform: translateY(5rpx);"
											v-if="chooseCouponForm.ableMaxdiscountAmount">
											{{ chooseCouponForm.ableMaxdiscountAmount }}
										</view>
									</view>
									<view class="is-click" v-else>暂无可用优惠卷</view>
									<u-icon name="arrow-right" color="#909090" size="10"></u-icon>
								</view>
							</view>
							<view class="pay-coupon-list" @click="funChooseMember">
								<view class="pay-coupon-title">
									<uni-icons v-if="!chooseMember && memberFlag" type="circle" color="#c27e15"
										size="24" />
									<uni-icons v-if="chooseMember && memberFlag" type="checkbox-filled" color="#c27e15"
										size="24" />
									<view>{{ memberFlag ? '会员权益折扣' : '会员优惠' }}</view>
									<view class="name" v-if="!memberFlag">您还不是会员</view>
								</view>
								<view class="pay-coupon-detail">
									<view class="text" v-if="memberFlag">
										<u-icon name="minus" color="#909090" size="9"
											v-if="preferentialAccount"></u-icon>
										<u-icon name="rmb" color="#909090" size="10"
											v-if="preferentialAccount"></u-icon>
										<view style="transform: translateY(5rpx);" v-if="preferentialAccount">
											{{ preferentialAccount }}
										</view>
									</view>
									<view class="member-btn" v-else>
										<view @click.stop="clickToMember">成为会员</view>
									</view>
									<u-icon name="arrow-right" color="#909090" size="10" v-if="!memberFlag"></u-icon>
								</view>
							</view>
							<view class="pay-coupon-list" @click="funChooseSave">
								<view class="pay-coupon-title">
									<uni-icons v-if="!chooseSave && valueFlag" type="circle" color="#c27e15"
										size="24" />
									<uni-icons v-if="chooseSave && valueFlag" type="checkbox-filled" color="#c27e15"
										size="24" />
									<view>{{ valueFlag ? '储值卡折扣' : '储值卡优惠' }}</view>
									<view class="name" v-if="!valueFlag">您还没有储值卡</view>
								</view>
								<view class="pay-coupon-detail">
									<view class="text" v-if="valueFlag">
										<u-icon name="minus" color="#909090" size="9"
											v-if="preferentialTotalSave"></u-icon>
										<u-icon name="rmb" color="#909090" size="10"
											v-if="preferentialTotalSave"></u-icon>
										<view style="transform: translateY(5rpx);" v-if="preferentialTotalSave">
											{{ preferentialTotalSave }}
										</view>
									</view>
									<view class="member-btn" v-else>
										<view @click="clickToSaveFlag">前去充值</view>
									</view>
									<u-icon name="arrow-right" color="#909090" size="10" v-if="!valueFlag"></u-icon>
								</view>
							</view>
						</view>
					</view>
					<view class="account">
						<view>总计</view>
						<view class="money">
							<u-icon name="rmb" color="#fe4d4f" size="15"></u-icon>
							<view class="rmb">{{ allAccount }}</view>
						</view>
					</view>
				</view>
			</view>

			<view class="preview">
				<view class="title">
					<view class="box-line"></view>
					<view class="text">支付方式</view>
					<view class="pay-type">
						<view class="type" v-for="(item, index) in payTypeConfig" :key="index"
							@click="clickPayType(item, index)">
							<view v-if="index === 1 && valueFlag || index === 0">
								<view class="left-box">
									<view style="width: 25rpx;">
										<u-icon name="checkmark-circle-fill" color="#f98203" size="15"
											v-if="payTypeIndex === index"></u-icon>
									</view>
									<view style="margin: 0 15rpx;">
										<u-icon name="weixin-circle-fill" v-if="item.showIcon" color="#28c445"
											size="28"></u-icon>
										<image v-else class="pay-icon" :src="item.icon" mode="aspectFill" />
									</view>
									<view>{{ item.text }}</view>
								</view>
								<view class="right-box" v-if="item.showAccount">
									当前余额：{{ item.account }}元
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="bottom-text">
				<view>退单说明</view>
				<view>{{chargebackExplain}}</view>
			</view>
		</view>
		<view class="bottom-btn">
			<view class="button" @click="clickPayOrder">
				<u-icon name="rmb" color="#fff" size="12"></u-icon>
				<view style="font-size: 47rpx;margin:0 10rpx;">{{ allAccount }}</view>支付订单
			</view>
		</view>

		<view class="action">
			<u-action-sheet :closeOnClickOverlay="true" :closeOnClickAction="true" round="10" :show="showSheet"
				:title="sheetTitle" @close="showSheet = false">
				<scroll-view class="coupon-item" scroll-y>
					<view v-if="actionFlag">
						<view class="action-list">
							<view class="coupon-list" v-for="(item, index) in sheetCoupon" :key="index"
								@click="clickCoupon(item, index)">
								<view class="top">
									<view class="number" v-if="item.discountsType==1">
										{{ item.discountRate }}折
									</view>
									<view class="number" v-else>
										<u-icon name="rmb" color="rgba(254, 77, 79, 1)" size="12"></u-icon>
										{{ item.ableMaxdiscountAmount }}
									</view>
									<view class="text">{{ item.name }}</view>
									<view>
										<uni-icons v-if="chooseCouponForm.id === item.id" type="checkbox-filled"
											size="25" color="#c27e15"></uni-icons>
										<uni-icons v-else type="circle" size="25"
											color="rgba(102, 102, 102, 1)"></uni-icons>
									</view>
								</view>
								<view class="down">
									<view style="margin-right: 40rpx;">满{{ item.fullAmount }}元可用</view>
									<view>限{{ item.effectiveTime }}前使用</view>
								</view>
							</view>
						</view>
					</view>
					<view v-else>
						<view class="room" v-if="privateRoom.length > 0">
							<view class="list" v-for="(item, index) in privateRoom" :key="index">
								<view class="room-left">
									<view>包间名称：{{ item.compartmentName }}</view>
									<view>包间编号：{{ item.compartmentNubmer }}</view>
									<view>包间床位：{{ item.bedNumber }}</view>
								</view>
								<view class="room-center">
									<u-icon name="rmb" color="rgba(212, 48, 48, 1)" size="18"></u-icon>
									<view>{{ item.privateRoomPrice }}</view>
								</view>
								<view class="room-right" @click="clickRoom(item, index)">
									<uni-icons v-if="chooseIndex === index" type="checkbox-filled" size="25"
										color="#c27e15"></uni-icons>
									<uni-icons v-else type="circle" size="25" color="#c27e15"></uni-icons>
								</view>
							</view>
						</view>
						<view class="empty-room" v-else>
							<image class="img" :src="baseImgUrl + 'img_no_order.png'" alt="" />
							暂无包间
						</view>
					</view>
				</scroll-view>
				<view class="btn_edit">
					<view class="btn_cont" @click="confirmSheet">
						完成
					</view>
				</view>
			</u-action-sheet>
		</view>
		<you-popup :popupVisible="payVisible" popupTitle="退单规则" :showBtn="false" @popupClose="payVisible = false">
			<view slot="popupContent" class="popup-content">
				<!-- 标题 -->
				<!-- <view class="contain-text">
					订单开始前 30分钟前 退单返<span style="color: #C27E15;">100%</span>实付金额
				</view>
				<view class="contain-text">
					订单开始前 30分钟内 退单返<span style="color: #C27E15;">100%</span>实付金额
				</view>
				<view class="contain-text">
					订单开始前 30分钟内 退单返<span style="color: #C27E15;">80%</span>实付金额
				</view>
				<view class="contain-text">
					订单开始前 30分钟后 退单返<span style="color: #C27E15;">80%</span>实付金额
				</view> -->
				<view class="contain-text">{{returnOfPayment}}</view>
				<view class="contain-text" @click="notInformClick">
					<uni-icons type="checkbox-filled" size="22" color="#d9d9d9" v-if="!notInform"></uni-icons>
					<uni-icons type="checkbox-filled" size="22" color="#C27E15" v-else></uni-icons>
					<view style="margin-left: 10rpx;">不再提示</view>
				</view>
				<view class="popup-submit flexJcac">
					<view class="no-submit" @click="payVisible = false">取消</view>
					<view class="submit" @click="clickSurePay">同意规则并支付</view>
				</view>
			</view>
		</you-popup>
		<you-popup :popupVisible="tipsVisible" popupTitle="温馨提示" :showBtn="false" @popupClose="tipsVisible = false">
			<view slot="popupContent" class="popup-content">
				订单超时未支付，请重新下单
				<view class="popup-submit flexJcac">
					<view class="submit" @click="clickConfirmTimeout">确定</view>
				</view>
			</view>
		</you-popup>
	</view>
</template>

<script>
	import NavBar from "../../components/nav-bar"
	import Search from '../../components/search/index'
	import shopList from "@/subPages/components/shopList"
	import orderMaster from "./components/orderMaster"
	import YouPopup from "../../components/you-popup2/index"
	import api_order from '@/api/order'
	import pageConfig from '@/config'
	export default {
		name: "order",
		components: {
			NavBar,
			Search,
			shopList,
			orderMaster,
			YouPopup
		},
		data() {
			return {
				ChooseRoomValue: false, //是否选择包间
				chargebackExplain: '',
				baseImgUrl: pageConfig.baseImgUrl,
				chooseTechnician: [],
				transferData: {},
				privateRoom: [],
				chooseRoomIndex: 0,
				chooseRoom: {},
				roomPrice: 0,
				showSheet: false,
				sheetTitle: '',
				actionFlag: true,
				chooseIndex: 0,
				chooseItem: {},
				// accessoryData: [], // 附加商品
				// accessoryPrice: 0,
				preferentialAccount: 0, // 会员权益便宜的钱
				preferentialTotalSave: 0, // 储蓄权益便宜的钱
				memberFlag: false,
				valueFlag: false,
				chooseMember: false, // 使用会员权益
				chooseSave: false, // 使用储值卡权益
				couponList: [],
				chooseCouponForm: {},
				sheetCoupon: [],
				payTypeConfig: [{
						text: '微信支付',
						showIcon: true
					},
					{
						text: '储值卡支付',
						account: 0,
						showAccount: true,
						icon: pageConfig.baseIconUrl + 'icon_card_pay.png'
					}
				],
				noAllAccount: 0, // 没有任何附加项的价格
				couponAccount: 0, // 优惠券的金额
				payTypeIndex: 1,
				payVisible: false, // 退款弹出框
				notInform: false,
				refundStatus: null, // 退款弹出框状态
				mainHeight: '',
				actionHeight: '',
				account: '',
				timeData: {},
				tipsVisible: false,
				allAccount: '',
				technician: '',
				returnOfPayment: '',
				memberId: '',
				// 会员卡和储值卡id
				cardSId: {}
			}
		},
		computed: {
			// 总计的金额减去优惠券的金额  再减去会员权益
			// allAccount() { 
			// 	const amount = this.$methods.numberSub(this.noCouponAccount, this.couponAccount)
			// 	if (this.chooseMember) {
			// 		return this.$methods.numberSub(amount, this.preferentialAccount)
			// 	}else if(this.chooseSave){
			// 		return this.$methods.numberSub(amount, this.preferentialTotalSave)
			// 	} else {
			// 		return amount
			// 	}
			// },
			noCouponAccount() { // 项目金额加上包间费用加上商品价格
				const number1 = this.$methods.numberAdd(this.noAllAccount, this.roomPrice) // 项目金额加上包间金额
				// const number2 = this.$methods.numberAdd(number1, this.goodsPrice) // 商品金额
				return number1
			}
		},
		watch: {
			// chooseCouponForm: {
			// 	handler(newVal, oldVal) {
			// 		this.couponAccount = 0
			// 		if (newVal.discountAmount) {
			// 			this.couponAccount = this.$methods.numberAdd(this.couponAccount, newVal.discountAmount)
			// 		}
			// 	},
			// 	deep: true
			// }
		},
		onLoad(options) {
			this.chooseTechnician = JSON.parse(decodeURIComponent(options.chooseData))
			this.transferData = JSON.parse(decodeURIComponent(options.transferData))
			this.chargebackExplain = uni.getStorageSync('chargebackExplain')
			this.mainHeight = this.$store.getters.heightData.noTabMainHeight.split('px')[0] - 100 + 'px'
			this.actionHeight = this.$store.getters.heightData.mainSearchHeight.split("px")[0] - 250 + "px"
			if (options.technician) {
				this.technician = options.technician
			}
			this.getPreferential()
			this.getPrivateRoom()
			// this.getAccessory()
			this.getCardConfig()
			// this.getAllCoupon()
			// this.getDiscount()
			this.getRefundTip()
			this.GetTuiOrderFun()
		},
		onUnload() {
			console.log('111111', '进入了onUnload');
			this.deleteClickTec()
		},
		methods: {
			goBack() {
				this.deleteClickTec()
			},
			deleteClickTec() {
				const ids = uni.getStorageSync('transitionIds')
				if (ids) {
					api_order.fetchOrderIds(ids).then(res => {
						// console.log(res, 'res');
					})
				}
			},
			changeChooseSave() {
				this.chooseSave = false
				this.payTypeIndex = 0
				this.getDiscount(this.chooseCouponForm, this.payTypeIndex == 1 ? false : true)
			},
			onChange(e) {
				this.timeData = e
				if (e.minutes === 0 && e.seconds === 0) {
					this.tipsVisible = true
				}
			},
			clickConfirmTimeout() {
				const params = encodeURIComponent(JSON.stringify({
					closingTime: this.transferData.closingTime,
					openingTime: this.transferData.openingTime,
					regionId: this.transferData.regionId,
					regionName: this.transferData.regionName,
					storeAddress: this.transferData.storeAddress,
					storeId: this.transferData.storeId,
					storeName: this.transferData.storeName,
				}))
				this.deleteClickTec()
				// uni.setStorageSync('chooseTechnician', {})
				uni.removeStorageSync('chooseTechnician')
				this.$store.commit('TECHNICIAN_NUMBER', {})
				if (this.technician == 'technician') {
					uni.navigateBack()
				} else {
					uni.reLaunch({
						url: `/subPages/home/chooseProject?transferData=${params}`
					})
				}

			},
			// 获取会员弹窗的状态
			getRefundTip() {
				const params = {
					userId: uni.getStorageSync('userInfo').id,
					storeId: this.transferData.storeId
				}
				api_order.fetchRefundTip(params).then(res => {
					this.refundStatus = res.data.status
				})
			},
			// 获取会员权益省的钱
			getPreferential() {
				let totalPrice = 0
				let totalMember = 0
				this.chooseTechnician.forEach(item => {
					let goodsPrice = 0
					if (item.zyOrderProductList && item.zyOrderProductList.length) {
						item.zyOrderProductList.forEach(pItem => {
							goodsPrice += this.$methods.numberMul(Number(pItem.originalPrice), Number(pItem
								.productNum))
						})
					}
					totalPrice += Number(item.price) // 总的项目原价
					totalPrice = this.$methods.numberAdd(totalPrice, goodsPrice) // 总的项目原价加上附加商品的价格
					totalMember += Number(item.preferential) // 总的项目折扣价
				})
				this.noAllAccount = totalPrice //总的原价
			},
			// 获取会员和储值折扣价
			getDiscount(item, isCoupon) {
				// console.log(item, isCoupon)
				const zyOrderItemList = this.chooseTechnician.map(cItem => {
					return {
						itemId: cItem.projectId,
						technicianId: cItem.id,
						subscribeStartTimeString: cItem.subscribeStartTime,
						paymentMoney: cItem.price,
						zyOrderProductList: cItem.zyOrderProductList,

					}
				})
				// const zyOrderProductList = []
				// this.accessoryData.forEach(aItem => {
				// 	if (aItem.number > 0) {
				// 		zyOrderProductList.push({
				// 			id: aItem.id,
				// 			productNum: aItem.number,
				// 			originalPrice: aItem.originalPrice
				// 		})
				// 	}
				// })
				const params = {
					regionId: this.transferData.regionId,
					regionName: this.transferData.regionName,
					storeId: this.transferData.storeId,
					storeName: this.transferData.storeName,
					isMember: this.chooseMember ? 1 : 2,
					compartmentId: this.chooseRoom.id || null,
					compartmentName: this.chooseRoom.compartmentName || null,
					compartmentMoney: this.chooseRoom.privateRoomPrice || null,
					isValue: this.chooseSave ? 1 : 2,
					useInterestsType: 0,
					itemCoupon: item ? item.id : null,
					zyOrderItemList,
					// zyOrderProductList
				}
				api_order.fetchCouponDiscount(params).then(res => {
					if (res.code !== 200) return
					if (item) {
						this.couponAccount = this.$methods.numberSub(res.data.totalAmount, res.data.discountAmount)
					}
					this.preferentialAccount = res.data.memberDiscounts || 0
					this.preferentialTotalSave = res.data.valueCardDiscounts || 0
					this.showSheet = false
					this.allAccount = res.data.discountAmount
					this.memberId = res.data.memberId
					this.cardSId = {
						memberId: res.data.memberId,
						valuecardId: res.data.valuecardId
					}
				})
			},
			async getTotal(item, isCoupon) {
				const params = {
					regionId: this.transferData.regionId,
					regionName: this.transferData.regionName,
					storeId: this.transferData.storeId,
					storeName: this.transferData.storeName,
					isMember: isCoupon ? 2 : this.chooseMember ? 1 : 2,
					compartmentId: this.chooseRoom.id || null,
					compartmentName: this.chooseRoom.compartmentName || null,
					compartmentMoney: this.chooseRoom.privateRoomPrice || null,
					isValue: isCoupon ? 2 : this.payTypeIndex === 1 ? 1 : 2,
					useInterestsType: 0,
					itemCoupon: item ? item.id : null,
					zyOrderItemList,
				}
				const res = await api_order.fetchCouponDiscount(params)
				if (res.code == 200) {
					if (item) {
						this.couponAccount = this.$methods.numberSub(res.data.totalAmount, res.data.discountAmount)
					}
					this.preferentialAccount = res.data.memberDiscounts || 0
					this.preferentialTotalSave = res.data.valueCardDiscounts || 0
					this.showSheet = false
				}
			},
			// 获取包间
			getPrivateRoom() {
				const params = {
					bedNumber: this.chooseTechnician.length,
					storeId: this.transferData.storeId,
					roomType: 1
				}
				api_order.fetchPrivateRoom(params).then((res) => {
					if (res.code !== 200) return
					const resData = res.rows
					resData.forEach(item => {
						item.privateRoomPrices = this.$methods.numberMul(item.price, item.spareBed)
					})
					// console.log(resData, 'resData');
					this.privateRoom = resData
				})
			},
			// // 附件项数据
			// getAccessory() {
			// 	const params = {
			// 		storeId: this.transferData.storeId,
			// 		status: 1
			// 	}
			// 	api_order.fetchAccessory(params).then((res) => {
			// 		if (res.code !== 200) return
			// 		this.accessoryData = res.rows.map(item => {
			// 			return {
			// 				...item,
			// 				number: 0
			// 			}
			// 		})
			// 	})
			// },
			// 获取会员数据
			getCardConfig() {
				const params = {
					regionId: this.transferData.regionId,
					storeId: this.transferData.storeId
				}
				api_order.judgeCard(params).then(res => {
					if (res.code !== 200) return
					this.memberFlag = res.data.memberFlag
					this.valueFlag = res.data.valueFlag
					this.payTypeConfig[1].account = res.data.valueMoney ? Number(res.data.valueMoney) : 0
					this.account = res.data.valueMoney ? Number(res.data.valueMoney) : 0
					this.payTypeIndex = res.data.valueFlag ? 1 : 0
					if (this.memberFlag) {
						this.payTypeIndex = 0
						this.chooseMember = true
						this.getAllCoupon({
							useType: 2
						})
						return
					}
					if (this.valueFlag) {
						this.chooseSave = true
					}
					this.getAllCoupon({
						useType: 4
					})
				})
			},
			// 获取优惠券
			getAllCoupon(useType) {
				const result = this.chooseTechnician.map(item => {
					const originalPrice = item.zyOrderProductList ? item.zyOrderProductList.reduce((acc,
						product) => acc + Number(product.originalPrice), 0) : 0;
					const allAccount = Number(item.price) + Number(originalPrice);
					return {
						...item,
						allAccount
					};
				});
				const allAccount = result.reduce((res, items) => res + items.allAccount, 0)
				// console.log('当前订单', result, allAccount)
				const params = {
					// useToday: this.transferData.reserveDate,
					// couponTypeName: '项目券',
					storeId: this.transferData.storeId,
					phoneNumber: uni.getStorageSync('userInfo').phoneNumber,
					fullAmount: allAccount,
					...useType,
					projectIds: this.chooseTechnician
						.map(tItem => tItem.projectId)
						.filter((value, index, self) => {
							return self.indexOf(value) === index
						}).join(',')
				}
				api_order.fetchUseCoupon(params).then(res => {
					if (res.code !== 200) return
					this.couponList = res.data
					if (this.couponList && this.couponList.length) {
						this.chooseCouponForm = this.couponList[0]
						this.getDiscount(this.chooseCouponForm, this.payTypeIndex == 1 ? false : true)
					} else {
						this.getDiscount({}, this.valueFlag ? false : true)
					}
				})
			},
			clickChooseRoom() {
				this.chooseIndex = 0
				if (this.ChooseRoomValue) {
					if (this.privateRoom.length > 0) {
						this.chooseItem = this.chooseRoom = this.privateRoom[0] //默认选第一个
					} else {
						this.ChooseRoomValue = false //关闭switch
						uni.showToast({
							title: '暂无可使用包间',
							icon: 'none'
						})
						return
					}
				} else {
					this.chooseItem = this.chooseRoom = {}
				}
				//重新计算价格
				if (this.chooseSave) {
					// console.log(储值卡);
					this.funChooseSave()
				} else if (this.chooseMember) {
					// console.log(会员卡);
					this.funChooseMember()
				} else {
					// console.log(都没使用，微信支付，优惠券);
					this.clickPayType({}, 0)
				}
				// console.log(this.privateRoom, '211111');
				// this.showSheet = true
				// this.sheetTitle = '请选择包间'
				// this.actionFlag = false
				// this.chooseIndex = this.chooseRoomIndex
				// this.chooseItem = this.chooseRoom = this.privateRoom[0]
			},
			clickRoom(item, index) {
				if (this.chooseIndex === index) {
					this.chooseIndex = -1
					this.chooseItem = {}
					return
				}
				this.chooseIndex = index
				this.chooseItem = item
			},
			// clickPlusItem(item) {
			// 	this.accessoryPrice = this.$methods.numberAdd(this.accessoryPrice, item.originalPrice)
			// },
			// clickMinusItem(item) {
			// 	if (item.number <= 0) return
			// 	this.accessoryPrice = this.$methods.numberSub(this.accessoryPrice, item.originalPrice)
			// },
			confirmSheet() {
				if (this.actionFlag) {
					this.chooseCouponForm = this.chooseItem
				} else {
					this.chooseRoomIndex = this.chooseIndex
					this.chooseRoom = this.chooseItem
					this.roomPrice = this.chooseItem.privateRoomPrice ? this.chooseItem.privateRoomPrice : 0
					if (this.chooseSave) {
						// console.log(11111);
						this.funChooseSave()
					} else if (this.chooseMember) {
						// console.log(2222);
						this.funChooseMember()
					} else {
						// console.log(33333);
						this.clickPayType({}, 0)
					}
				}
				this.showSheet = false
				// const params = {
				// 	regionId: this.transferData.regionId,
				// 	regionName: this.transferData.regionName,
				// 	storeId: this.transferData.storeId,
				// 	storeName: this.transferData.storeName,
				// 	isMember: isCoupon ?  2: this.chooseMember ? 1 : 2,
				// 	compartmentId: this.chooseRoom.id || null,
				// 	compartmentName: this.chooseRoom.compartmentName || null,
				// 	compartmentMoney: this.chooseRoom.price || null,
				// 	isValue: isCoupon ? 2 : this.payTypeIndex === 1 ? 1 : 2,
				// 	useInterestsType: 0,
				// 	itemCoupon: item ? item.id : null,
				// 	zyOrderItemList,
				// }
				// api_order.fetchCouponDiscount(params).then(res => {
				// 	if (res.code !== 200) return
				// 	if (item) {
				// 		this.couponAccount = this.$methods.numberSub(res.data.totalAmount, res.data.discountAmount)
				// 	}
				// 	this.preferentialAccount = res.data.memberDiscounts || 0
				// 	this.preferentialTotalSave = res.data.valueCardDiscounts || 0
				// 	this.showSheet = false
				// })
			},
			closeChooseMember() {
				this.chooseMember = false
				this.getAllCoupon({
					useType: 4
				})
			},
			funChooseMember() {
				if (this.memberFlag) {
					this.clickChooseMember()
				} else {
					this.closeChooseMember()
				}
			},
			funChooseSave() {
				if (this.valueFlag) {
					this.clickChooseSave()
				} else {
					this.changeChooseSave()
				}
			},
			clickChooseMember() {
				if (this.chooseSave) {
					this.chooseSave = false
					this.payTypeIndex = 0
				}
				this.payTypeIndex = 0
				this.chooseMember = true
				this.getAllCoupon({
					useType: 2
				})
				// this.payTypeIndex = 0	
				// this.chooseMember = !this.chooseMember
				// if (this.chooseMember && this.chooseSave) {
				// 	this.chooseSave = false; // 如果两者同时为true，则将chooseSave设为false
				// } 

				// setTimeout(() => {
				// 	this.getAllCoupon()
				// }, 300)
			},

			clickChooseSave() {
				if (this.account < this.allAccount) {
					uni.showToast({
						title: '储蓄卡余额不足或未办储蓄卡',
						icon: 'none'
					})
					return
				}
				if (this.chooseMember) {
					this.chooseMember = false
				}
				this.payTypeIndex = 1
				this.chooseSave = true
				this.getDiscount(this.chooseCouponForm, this.payTypeIndex == 1 ? false : true)
				this.getAllCoupon({
					useType: 3
				})
				// this.payTypeIndex = 1
				// this.chooseSave = !this.chooseSave
				// if (this.chooseMember && this.chooseSave) {
				// 	this.chooseMember = false; // 如果两者同时为true，则将chooseSave设为false
				// } 
				// if(this.chooseSave===false){
				// 	this.payTypeIndex = 0
				// }

				// setTimeout(() => {
				// 	this.getAllCoupon()
				// }, 300)
			},
			clickChooseCoupon() {
				this.sheetTitle = '请选择代金券'
				this.actionFlag = true
				if (this.couponList.length) {
					this.showSheet = true
					this.sheetCoupon = this.couponList
				}
			},
			clickCoupon(item, index) {
				if (this.chooseCouponForm && this.chooseCouponForm.id === item.id) {
					// console.log('取消优惠券')
					this.chooseCouponForm = {}
					this.chooseItem = {}
					this.preferentialAccount = 0
					this.getDiscount({}, this.payTypeIndex == 1 ? false : true)
					// this.preferentialTotalSave = 0
					return
				}
				// console.log('选择优惠券')
				this.chooseCouponForm = item
				this.chooseItem = item
				this.getDiscount(item, this.payTypeIndex == 1 ? false : true)
			},
			clickPayType(item, index) {
				if (index === 1) {
					if (this.account < this.allAccount) {
						uni.showToast({
							title: '储蓄卡余额不足或未办储蓄卡',
							icon: 'none'
						})
						return
					}
					this.chooseSave = true
					this.chooseMember = false
					this.getAllCoupon({
						useType: 3
					})
				} else if (index === 0) {
					this.chooseSave = false
					this.getAllCoupon({
						useType: 4
					})
				}
				this.payTypeIndex = index
				this.getDiscount(this.chooseCouponForm, this.payTypeIndex == 1 ? false : true)
			},
			clickPayOrder() {
				if (this.refundStatus === 1) {
					// this.GetTuiOrderFun()
					this.payVisible = true
				} else {
					this.clickSurePay()
				}
			},
			async clickSurePay() {
				this.deleteClickTec()
				if (this.refundStatus === 1 && this.notInform) {
					const params = {
						userId: uni.getStorageSync('userInfo').id,
						storeId: this.transferData.storeId
					}
					api_order.updateRefundTip(params).then(res => {

					})
				}
				this.payVisible = false
				const zyOrderItemList = this.chooseTechnician.map(item => {
					return {
						itemId: item.projectId,
						technicianId: item.id,
						subscribeStartTimeString: item.subscribeStartTime,
						paymentMoney: item.price,
						zyOrderProductList: item.zyOrderProductList,
						memberId: this.memberId,
					}
				})
				// const checkTech = await this.checkTechnician(zyOrderItemList)
				// if (!checkTech) {
				// 	uni.showToast({
				// 		title: '技师重复，请重新选择',
				// 		icon: 'none'
				// 	})
				// 	return
				// }
				// const zyOrderProductList = []
				// this.accessoryData.forEach(item => {
				// 	if (item.number > 0) {
				// 		zyOrderProductList.push({
				// 			id: item.id,
				// 			productNum: item.number,
				// 			originalPrice: item.originalPrice
				// 		})
				// 	}
				// })
				const params = {
					isMember: this.chooseMember ? 1 : 2,
					isValue: this.payTypeIndex == 1 ? 1 : 2,
					isDebit: this.chooseSave ? 1 : 2,
					compartmentId: this.chooseRoom.id || null,
					roomType: this.chooseRoom.id ? '1' : null,
					regionId: this.transferData.regionId,
					regionName: this.transferData.regionName,
					storeId: this.transferData.storeId,
					...this.cardSId,
					storeName: this.transferData.storeName,
					originActuallyMoney: this.allAccount,
					zyOrderItemList,
					// zyOrderProductList,
					storeZyUserCouponId: this.chooseCouponForm.myCouponId || null
				}
				if (this.payTypeIndex === 0 && this.chooseSave === true) {
					uni.showToast({
						title: '使用了储蓄权益，微信支付暂停使用',
						icon: 'none'
					})
					return
				}
				uni.removeStorageSync('confirmOrderConfig')
				this.confirmAddOrder(params)
			},
			async checkTechnician(zyOrderItemList) {
				const params = {
					zyOrderItemList
				}
				let flag = false
				await api_order.determineDuplicates(params).then(res => {
					if (res.code === 200) {
						flag = true
					} else {
						flag = false
					}
				})
				return flag
			},
			confirmAddOrder(params) {
				let that = this
				if (params.isValue === 2) {
					api_order.addOrder(params).then(res => {
						if (res.code !== 200) return
						// console.log(res.data.data,'payParams.signType');
						const payParams = res.data.data
						uni.removeStorageSync('chooseTechnician')
						this.$store.commit('TECHNICIAN_NUMBER', {})
						if (this.allAccount == "0.00") {
							uni.showToast({
								title: '支付成功！',
								icon: 'success',
								mask: true
							})
							uni.reLaunch({
								url: '/subPages/home/orderSubmit'
							})
						} else {
							const resParams = {
								timeStamp: payParams.timestamp,
								nonceStr: payParams.nonceStr,
								package: payParams.package,
								signType: payParams.signType,
								paySign: payParams.paySign
							}
							// 调用微信小程序的支付接口
							uni.requestPayment({
								...resParams,
								success(res) {
									// 支付成功的回调
									// uni.showToast({
									// 	title: '支付成功！',
									// 	icon: 'success',
									// 	mask: true
									// })
									// console.log(res, 'payParams.signType');
									// uni.switchTab({
									// 	url: '/pages/order/index'
									// })
									that.goTo()
								},
								fail(res) {
									// 支付失败的回调
									uni.showToast({
										title: '支付失败',
										icon: 'none',
										duration: 2000
									})
									that.cancelPayment()
								}
							})
						}
					})
				}
				if (params.isValue === 1) {
					api_order.cardPay(params).then(res => {
						if (res.code !== 200) return
						uni.showToast({
							title: '储值卡支付成功！',
							icon: 'success',
							mask: true
						})
						uni.removeStorageSync('chooseTechnician')
						uni.reLaunch({
							url: '/subPages/home/orderSubmit'
						})
					})
				}
			},

			goTo() {

				uni.reLaunch({
					url: '/subPages/home/orderSubmit'
				})

				return

				uni.switchTab({
					url: '/pages/order/index'
				})
			},
			// 取消支付函数
			cancelPayment() {
				uni.showToast({
					title: '支付已取消',
					icon: 'none',
					duration: 2000
				})
				// uni.switchTab({
				// 	url: '/pages/order/index'
				// })
				uni.switchTab({
					url: '/pages/index'
				})
			},
			clickToMember() {
				const confirmOrderConfig = {
					chooseData: this.chooseTechnician,
					transferData: this.transferData,
					backUrl: '/subPages/home/confirmOrder'
				}
				uni.setStorageSync('confirmOrderConfig', confirmOrderConfig)
				uni.navigateTo({
					url: `/subPages/membership/index`
				})
			},
			clickToSaveFlag() {
				const confirmOrderConfig = {
					chooseData: this.chooseTechnician,
					transferData: this.transferData,
					backUrl: '/subPages/home/confirmOrder'
				}
				uni.setStorageSync('confirmOrderConfig', confirmOrderConfig)
				uni.navigateTo({
					url: `/subPages/storedCard/index`
				})
			},
			notInformClick() {
				this.notInform = !this.notInform
			},
			//获取退单规则
			GetTuiOrderFun() {
				api_order.getStoreChargeback({
					storeId: this.transferData.storeId
				}).then(res => {
					// console.log(res, res);
					if (res && res.data) {
						this.returnOfPayment = res.data.chargebackExplain
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@mixin flex($direction: row) {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: $direction;
	}

	.contain-text {
		display: flex;
		width: 100%;
		margin-bottom: 14rpx;
		padding-left: 40rpx;
		font-size: 26rpx;
		font-weight: 400;
		color: #666666;
	}

	.is-click {
		font-size: 24rpx;
		font-weight: 400;
		color: #808080;
	}

	::v-deep .action {
		background: #f8f8f8;

		.u-action-sheet__header {
			background: #f8f8f8;
			border-radius: 19rpx 19rpx 0 0;
		}

		.action-list {
			width: 100%;
			background: #f8f8f8;
			padding: 0 37rpx;
			padding-bottom: 90rpx;

			.coupon-list {
				width: 100%;
				opacity: 1;
				border-radius: 14rpx;
				background: #ffffff;
				box-shadow: 0rpx 0rpx 16rpx rgba(211, 211, 211, 0.25);
				padding: 25rpx 0 24rpx 0;
				margin-bottom: 25rpx;

				.top {
					display: flex;
					justify-content: space-between;
					align-items: center;
					border-bottom: 1rpx solid #e6e6e6;
					padding: 25rpx 26rpx 16rpx 32rpx;

					.number {
						display: flex;
						font-size: 42rpx;
						font-weight: 700;
						color: #fe4d4f;
					}

					.text {
						font-size: 30rpx;
						font-weight: 600;
						color: #333333;
						width: 55%;
						text-align: left;
					}
				}

				.down {
					font-size: 26rpx;
					font-weight: 400;
					display: flex;
					padding: 17rpx 0 0 39rpx;
					color: #666666;
				}
			}
		}

		.shop-image {
			width: 100%;
			height: 800rpx;
		}

		.room {
			width: 100%;
			padding: 0 39rpx 30rpx 36rpx;
			background-color: #f8f8f8;

			.list {
				width: 100%;
				opacity: 1;
				border-radius: 15px;
				background: #ffffff;
				display: flex;
				// justify-content: space-between;
				padding: 20rpx 33rpx;
				margin-bottom: 15rpx;

				.room-left {
					font-size: 24rpx;
					font-weight: 500;
					color: #383838;
					width: 60%;
					text-align: left;
				}

				.room-center {
					display: flex;
					justify-content: left;
					align-items: center;
					width: 25%;
					font-size: 48rpx;
					font-weight: 700;
					color: #d43030;

				}

				.room-right {
					width: 15%;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}
		}

		.empty-room {
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			padding: 20rpx 0 70rpx;
		}
	}

	.minus {
		width: 30.62rpx;
		height: 30.62rpx;
		opacity: 1;
		background: #ffffff;
		box-shadow: 0rpx 0rpx 5.93rpx rgba(208, 208, 208, 0.25);
		@include flex;
		justify-content: center;
		align-items: center;
	}

	.input {
		// padding: 0 10px;
		background: #f8f8f8;
	}

	.plus {
		border-radius: 50%;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
		align-items: center;
		width: 30.62rpx;
		height: 30.62rpx;
		opacity: 1;
		background: #ffffff;
		box-shadow: 0rpx 0rpx 5.93rpx rgba(208, 208, 208, 0.25);
	}

	.top-bg {
		width: 100%;
		height: 120rpx;
		opacity: 1;
		background: #c27e15;
	}

	.top-data {
		opacity: 1;
		border-radius: 17rpx 17rpx 0 0;
		background: #ffffff;
		margin: 0 38rpx;
		margin-top: -100rpx;
		padding: 46rpx 44rpx 31rpx 42rpx;

		.top {
			.top-name {
				font-size: 32rpx;
				font-weight: 500;
				letter-spacing: 0rpx;
				line-height: 46.34rpx;
				color: #333333;
				margin-bottom: 10rpx;
			}

			.address {
				display: flex;
				font-size: 26rpx;
				font-weight: 400;
				letter-spacing: 0rpx;
				line-height: 37.65rpx;
				color: #333333;

				.left {
					display: flex;
					align-items: center;
					width: 28%;
					height: 39rpx;
					color: #666666;
				}

				.right {
					width: 70%;
				}
			}
		}
	}

	.countdown-box {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 76rpx;
		margin: 0 38rpx;
		border-radius: 0rpx 0rpx 17rpx 17rpx;
		font-size: 24rpx;
		color: #FFF;
		background: linear-gradient(180.04deg, #fab548 0%, #f2a446 100%);

		.clock-icon {
			margin-right: 6rpx;
		}

		.time-box {
			height: 24rpx;
		}
	}

	.preview {
		opacity: 1;
		border-radius: 17rpx;
		background: #ffffff;
		margin: 0 38rpx;
		margin-top: 24rpx;
		padding: 26rpx 0 5rpx 39rpx;

		.title {
			position: relative;
			width: 100%;
			margin-left: -39rpx;
			margin-bottom: 20rpx;

			.box-line {
				position: absolute;
				left: 0;
				top: 0;
				width: 15rpx;
				height: 48rpx;
				opacity: 1;
				background: #c27e15;

			}

			.text {
				margin-left: 44rpx;
				font-size: 38rpx;
				font-weight: 600;
				display: flex;
				justify-content: space-between;

				.text-left {
					display: flex;
					align-items: center;

					.name {
						margin-right: 20rpx;
					}

					.room-item {
						margin-left: 20rpx;
						font-size: 22rpx;
						font-weight: 500;
						color: #808080;
					}
				}

				.text-right {
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}
		}

		.img-list {
			margin-left: 30rpx;
			width: 100%;
			display: flex;
			flex-wrap: nowrap;
			white-space: nowrap;
			margin-top: 30rpx;

			.img-box {
				display: inline-flex;

				.box {
					margin-right: 20rpx;

					.img {
						width: 179rpx;
						height: 115.66rpx;
						border-radius: 11rpx;
					}

					.money-box {
						display: flex;
						justify-content: space-between;
						font-size: 26rpx;
						font-weight: 500;
						letter-spacing: 0rpx;
						line-height: 37.65rpx;
						color: #333333;

						.money-text {
							display: flex;

							.money {
								font-size: 31.06rpx;
								font-weight: 700;
								letter-spacing: -0.22rpx;
								line-height: 36.4rpx;
								color: #fe4d4f;
							}
						}
					}

					.number {
						width: 170rpx;
						margin-top: 12rpx;
					}
				}
			}
		}

		.pay-list {
			margin-left: 39rpx;

			.list {
				display: flex;
				justify-content: space-between;
				border-bottom: 1rpx solid #e6e6e6;
				padding: 27rpx 0 21rpx 0;

				&:last-child {
					border-bottom: 1rpx dashed #e6e6e6;
				}

				.name {
					display: flex;
					font-size: 30rpx;
					font-weight: 600;
					color: rgba(51, 51, 51, 1);

					.text {
						font-size: 27rpx;
						font-weight: 400;
						color: #666666;
						margin-left: 22rpx;
					}
				}

				.money {
					display: flex;
					font-size: 31.85rpx;
					font-weight: 400;
					color: #666666;
				}
			}

			.pay-coupon {
				// height: 252px;
				border-radius: 15px;
				background: #f9f9f9;
				margin-top: 20rpx;
				padding: 10rpx 35rpx;

				.pay-coupon-list {
					display: flex;
					justify-content: space-between;
					align-items: center;
					border-bottom: 2rpx solid #e5e5e5;
					padding: 30rpx 0;

					&:last-child {
						border-bottom: none;
					}

					.pay-coupon-title {
						display: flex;
						align-items: center;
						height: 40rpx;
						font-size: 24rpx;
						font-weight: 600;
						color: #000000;

						.name {
							font-size: 24rpx;
							font-weight: 400;
							color: #808080;
							margin-left: 20rpx;
						}
					}

					.pay-coupon-detail {
						display: flex;
						align-items: center;
						height: 40rpx;

						.text {
							display: flex;
							font-size: 24rpx;
							font-weight: 400;
							color: #808080;
						}

						.member-btn {
							display: flex;
							justify-content: center;
							height: 54rpx;
							padding: 0 20rpx;
							border-radius: 27rpx;
							line-height: 54rpx;
							font-size: 24rpx;
							color: #FFF;
							background-color: #c27e15;
						}
					}
				}
			}
		}

		.account {
			display: flex;
			justify-content: flex-end;
			font-size: 30rpx;
			font-weight: 500;
			color: rgba(51, 51, 51, 1);
			padding-top: 30rpx;

			.money {
				font-size: 40.11rpx;
				font-weight: 700;
				color: rgba(254, 77, 79, 1);
				display: flex;
				margin-left: 10rpx;
			}


		}

		.pay-type {
			margin-left: 39rpx;

			.type {
				padding: 25rpx 0 10rpx 0;
				display: flex;
				justify-content: space-between;
				border-bottom: 1rpx solid rgba(230, 230, 230, 1);

				&:last-child {
					border-bottom: none;
				}

				.left-box {
					widows: 30%;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 26rpx;
					font-weight: 400;
					color: rgba(51, 51, 51, 1);

					.pay-icon {
						width: 54rpx;
						height: 54rpx;
					}
				}

				.right-box {
					font-size: 26rpx;
					font-weight: 400;
					color: rgba(102, 102, 102, 1);

				}
			}
		}

	}

	.bottom-text {
		// margin-bottom: 200upx;
		font-size: 26rpx;
		font-weight: 400;
		letter-spacing: 0rpx;
		line-height: 37.65rpx;
		color: rgba(102, 102, 102, 1);
		margin: 30rpx 0 400rpx 37rpx;
	}

	.bottom-btn {
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 80px;
		background-color: #fff;
		padding: 22rpx 30rpx 44rpx;

		.button {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100%;
			height: 94rpx;
			border-radius: 63rpx;
			background: rgba(194, 126, 21, 1);
			font-size: 34rpx;
			font-weight: 500;
			color: rgba(255, 255, 255, 1);
		}
	}

	.popup-content {
		padding-bottom: 40rpx;
		// text-align: center;
	}

	.coupon-item {
		max-height: 50vh;
		margin-bottom: calc(160rpx - env(safe-area-inset-bottom));
	}
</style>